<template>
  <div id="tabsList">
    <div class="content">
      <div class="tabs">
        <div
          v-for="(tab, index) in tabs"
          :key="index"
          class="tab"
          @click="switchTab(index)"
          :class="{ active: activeTabIndex === index }"
        >
          {{ tab }}
          <span>
            <svg
              focusable="false"
              class=""
              style=""
              data-icon="caret-right"
              width="1em"
              height="1em"
              fill="currentColor"
              aria-hidden="true"
              viewBox="0 0 1024 1024"
            >
              <path
                d="M715.8 493.5L335 165.1c-14.2-12.2-35-1.2-35 18.5v656.8c0 19.7 20.8 30.7 35 18.5l380.8-328.4c10.9-9.4 10.9-27.6 0-37z"
              ></path>
            </svg>
          </span>
        </div>
      </div>
      <div class="content-container">
        <KeepAlive>
          <component :is="currentTab"></component>
        </KeepAlive>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, toRefs, ref, computed,markRaw  } from "vue";
import { useRouter } from "vue-router";
import Collect from "./Collect.vue";
import Order from "./Order.vue";
import Setting from "./Setting.vue";

const router = useRouter();
const activeTabIndex = ref(0);
const tabs = ref(["我的收藏", "我的订单", "个人设置"]);
// 将组件引用存放在tabContent中，使用markRaw标记为原始值
const tabContent = ref([
  markRaw(Collect),
  markRaw(Order),
  markRaw(Setting)
]);

const currentTab = ref(markRaw(Collect));
const switchTab = (index) => {
  activeTabIndex.value = index;
  currentTab.value = tabContent.value[index];
};
const height = computed(() => {
  return tabs.value.length * 54 + "px";
});
</script>

<style lang="scss" scoped>
#tabsList {
  margin-top: 50px;
  .tabs {
    display: flex;
    flex-direction: column;
    width: 200px;
    background-color: white;
    padding: 10px 0;
    border-radius: 5px;
    box-shadow: 0 0 10px #d7d7d7;
    height: v-bind(height);
  }

  .tab {
    cursor: pointer;
    width: 200px;
    height: 54px;
    line-height: 54px;
    padding-left: 20px;
    box-sizing: border-box;
    span {
      float: right;
      margin-right: 10px;
      svg {
        color: rgb(143, 143, 143);
      }
    }
  }

  .tab.active {
    background-color: #434b52;
    color: #fff;
  }

  .content-container {
    margin-left: 10px;
    height: 600px;
    box-shadow: 0px 0px 10px 0px #d7d7d7;
    flex: 1;
    border-radius: 10px;
  }

  .tab-content.active {
    display: block;
  }
}
</style>
